import React, {Component} from 'react';
import {connect} from 'react-redux';
import { bindActionCreators } from 'redux';
// import PropTypes from 'prop-types';

// 测试mobx

import { observable, autorun, action } from 'mobx';
import { observer } from 'mobx-react';

class Store {
  @observable num = 0
  @action add = () => {
    this.num ++
  }
}

const store = new Store()
store.add()


class ThemeSwitch extends Component {

  componentDidMount() {
    console.log(this.props)
  }
    _handleChangeColor = (color) => {
        if(this.props.onChangeColor){
            this.props.onChangeColor(color);
        }        
    }

    render() {
        return (
            <div>
                <button
                    style={{
                    color: this.props.themeColor
                }}
                    onClick={this
                    ._handleChangeColor
                    .bind(this, "red")}>Red</button>
                <button
                    style={{
                    color: this.props.themeColor
                }}
                    onClick={this
                    ._handleChangeColor
                    .bind(this, "blue")}>Blue</button>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        themeColor: state.themeColor
    }
}

// const mapStateToProps = (state) => state.changeColor;


// const mapDispatchToProps = (dispatch) => {
//     return {
//         onChangeColor:(color) => {
//             dispatch({
//                 type:"CHANGE_COLOR",
//                 themeColor: color
//             })
//         }
//     }
// }

const actions = {
  onChangeColor(color){
    return (dispatch, getState) => {



      dispatch({
        type: 'CHANGE_COLOR',
        themeColor: color
      })
    }
  }
}

  

  // dispatch({
  //   onChangeColor:(color) => ({
  //     type: "CHANGE_COLOR",
  //     themeColor:color
  //   })
  // }) 

  


// const mapDispatchToProps = (dispatch) => ({
//     onChangeColor: (color) => dispatch({
//         type: "CHANGE_COLOR",
//         themeColor: color
//     })
// })

const mapDispatchToProps = (dispatch) => bindActionCreators(actions, dispatch);

ThemeSwitch = connect(mapStateToProps, mapDispatchToProps)(ThemeSwitch)
export default ThemeSwitch

